import React, { Component } from 'react'
import { NavBar } from "antd-mobile";
import SearchInput from "../searchInput/SearchInput";
import "./Category.scss"
import myaxios from "../../utils/myaxios"
import axios from "axios"

export default class category extends Component {
    constructor(props){
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        categories:[],//返回的菜单数据
        categories_content:[],//右边菜单渲染的内容
        select_index:0,//当前选中左边的菜单
    }
    // 左边分类菜单点击的时候触发
    handleItemClick = (e) => {
        //获取点击选择的项
        let select_index = e.target.getAttribute("data-index")
        console.log(select_index);
        this.setState({
            select_index:parseInt(select_index),
            categories_content:this.state.categories[select_index].children,
        })
    }
    //右边图片点击
    handleProductItemClick = (e) => {
        // console.log(props);
        // console.log(cid);
        let cid = e.target.getAttribute("data-index")
        console.log(cid);
        this.props.history.push("/goodList/"+cid)
    }
    componentWillUnmount(){
        this.source.cancel("取消分类菜单请求")
    }
    //获取分类菜单的数据
    getCategories = (params) => {
        myaxios.get("/categories",{
            cancelToken:this.source.token
        }).then((res)=>{
        this.setCategories(res);
        }).catch((err)=>{
            console.log(err);
        })
    }
    //设置分类菜单的数据
    //is_storaged 代表是否之前已经缓存过
    setCategories = (res,is_storaged) => {
         //缓存的请求的数据
        let categories_cache = {};
        if(is_storaged){
            //直接获取本地缓存中的数据即可
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"))
        }else{
            categories_cache = { date:Date.now(), categories: res }
        }
        //缓存到本地
        localStorage.setItem("categories_cache",JSON.stringify(categories_cache))
        this.setState({
            categories:res,
            categories_content:res[0].children,
        })
    }

    componentDidMount() {
        //进来的时候 先判断本地的缓存是否过期
        let categories_cache = localStorage.getItem("categories_cache");
        //如果本地缓存不为空
        if(categories_cache&&categories_cache.data){
            //判断本地缓存不为空
            let current_time = Date.now();
            let storage_time = JSON.parse(categories_cache).date;
            if(current_time-storage_time> 60*60*1000){
                //一小时过期
                this.getCategories();
            }else{
                //缓存没有过期
                //第二个代表是否已经缓存过
            this.setCategories(JSON.parse(categories_cache).categories,true);
            }
        }else{
            this.getCategories();
        }
    }
    render() {
        return (
        <div className="yg-category">
        {/* 分类导航条开始 */}
        <div className="yg-category-nav">
        <NavBar className="category-nav">商品分类</NavBar>
        </div>
        {/* 分类导航条结束 */}
        {/* 分类搜索框开始 */}
        <div className="yg-category-search">
        <SearchInput></SearchInput>
        </div>
        {/* 分类搜索框结束 */}
        {/* 分类菜单开始 */}
        <div className="yg-category-content">
            {/* 利用冒泡机制处理点击事件 */}
            <div className="content-left" onClick={this.handleItemClick}>
                {this.state.categories.map((v,index)=>{
                    return (
                        <div data-index={index}
                        className={this.state.select_index===index?"active content-left-item":"content-left-item"}
                        key={v.cat_id}
                        >
                            {v.cat_name}
                        </div>
                    )
                })}
            </div>
            <div className="content-right">
                {this.state.categories_content.map((v, i) => {
                    return (
                        <div className="content-right-item" key={v.cat_id}>
                            {/* 二级菜单标题开始 */}
                            <div className="right-item-title">
                                {"/"}
                                {v.cat_name}
                                {"/"}
                            </div>
                            {/* 二级菜单标题结束 */}
                            {/* 产品列表开始 */}
                            <div className="product-list" onClick={this.handleProductItemClick}>
                                {v.children&&v.children.map(v=>{
                                    return <div
                                    key={v.cat_id}
                                    data-index={v.cat_id}
                                    className="product-list-item">
                                        <div className="imagerWrapper">
                                            <img src={v.cat_icon} alt="" data-index={v.cat_id}/>
                                        </div>
                                        <div className="item-title">
                                            {v.cat_name}
                                        </div>
                                    </div>
                                })}
                            </div>
                            {/* 产品列表结束 */}
                        </div>
                    )
                } )}
            </div>
        </div>
        {/* 分类菜单结束 */}
        </div>
        )
    }
}
